在flex布局中，如果一个元素设置了flex：1；子元素想做字符超出显示省略号的行为 overflow hidden white-space nowrap text-overflow ellipsis 发现 overflow hidden，元素随着文字的增多而变长，无法做到超出隐藏， hidden也失效了。

因为设置了flex:1所有的内容就会根据内容的长度进行宽度拉伸，导致换行和裁剪的失效，解决办法其实有两种：

给外层元素设置width: 0;自己元素的宽度控制不会超出父级，到达边缘的时候就触发超出隐藏，表现形式就是可以在结尾的时候以...结束。

上面的二种方法都可以达到我们需要的效果，给需要控制的元素设置了 flex:1 的时候，它会动态的获得父容器的剩余宽度，且不会被自己的子元素把内容撑开。